<template>
  <div class="receive-address">
    <app-header>新增收货地址</app-header>
    <div v-for="(item, key) in address" class="app-bodyer">
      <div class="personalLocation">
        <div class="receiverAddress">
          <img class="locationImg" src="../../assets/定位.png" />
          <span class="defultName">{{item.receiver}}</span>
          <span class="defultPhoto">{{item.phoneNumber}}</span>
        </div>
        <div class="detailedAddress">{{item.location}}{{item.details}}</div>
       </div>
      <div class="operatingBtn">
        <img class="radioBtn" src="../../assets/danxuanmoren.png" v-if="!item.isDefault" @click="transfrom(key)"/>
        <img class="hooBtn" src="../../assets/danxuangouxuan.png" v-if="item.isDefault" @click="changeList"/>
        <label class="detailBtn">设为默认</label>
        <img class="amendBtn" src="../../assets/修改.png" height="200" width="200"/>
        <span class="amendBtnTitle" @click="modAddr(key)">修改</span>
        <img class="delectBtn" src="../../assets/删除.png" height="200" width="200"/>
        <div class="delectBtnTitle" @click="delAddr(key)">删除</div>
      </div>

    </div>

    <div v-if="!address.length" class="addressContainer">
      <img src="../../assets/no-address-icon.png" alt="没有收货地址">
      <p class="addressWord">无收货地址</p>
    </div>
    <router-link class="primary-btn" to="/add-receive-address">新增收货地址</router-link>
  </div>
</template>

<script>
export default {
  name: "receiveAddress",
  data() {
    return {
      address: [],
      recieveInfo: [],
    }
  },

  methods:{
    transfrom(key) {
      this.address[key].addrid = this.address[key]._id;
      this.$request.defaultAddr(this.address[key])
        .then((res) => {
          if(res.data.code === "10001") {
            console.log(res);
            for(let prop in this.address) {
              this.address[prop].isDefault = this.address[key].isDefault;
            }
            this.address[key].isDefault = !this.address[key].isDefault;
          }
        })
        .catch((err) => console.log(err));
    },
    changeList() {
      this.$notify({
        message: '已经设为默认地址',
        duration: 2000,
        background: '#1989fa',
      })
    },
    delAddr(itemKeys){
      this.$request.delAddr({addrid: this.address[itemKeys]._id})
        .then(res => {
          this.$notify({
            message: '删除成功',
            duration: 2000,
            background: '#1989fa',
          });
          if(res.data.code === 1){
            this.address.splice(itemKeys, 1);
          }
          console.log(res);
        })
        .catch(error => console.log(error));
    },
    modAddr(key) {
      console.log(this.recieveInfo[key]);
      this.$router.push({path: '/updataAddress', query: {res: this.address[key]}});
    },
  },

  created() {
    this.$request.getAddr()
      .then(data => {
        console.log(data);
        this.address = data.data.data;
      })
      .catch(error => console.log(error));
  }
}
</script>

<style scoped>
  *{
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .app-bodyer{
    background: #f6f6f6;
    width: 100vw;
  }
  .personalLocation{
    width: 100vw;
    height: 3.84375rem;
    border-bottom: 1px solid #e2e2e2;
    position: relative;
    background: white;
    font-size: 0.90625rem;
  }
  .receiverAddress{
    margin-left: 1.096375rem;
    color: #3d3d3d;
  }
  .locationImg{
    width: 1.6rem;
    height: 1.5rem;
    position: absolute;
    top: 1.2rem;
    left: 1.20625rem;
  }
  .defultName{
    position: absolute;
    top: 0.6375rem;
    left: 3.39375rem;
  }
  .defultPhoto{
    position: absolute;
    top: 0.4375rem;
    right: 1.5625rem;
  }
  .detailedAddress{
    color: #727272;
    position: absolute;
    top: 58px;
    left: 80px;
  }
  .operatingBtn{
    height: 2.25rem;
    width: 100vw;
    background: white;
    position: relative;
    color: #737373;
    font-size: 14px;
    border-bottom: 0.001rem solid #e2e2e2;
  }
  .radioBtn{
    width: 1.246875rem;
    height: 1.26875rem;
    position: absolute;
    top: 15px;
    left: 30px;
  }
  .hooBtn{
    width: 30px;
    height: 30px;
    position: absolute;
    top: 15px;
    left: 30px;
  }
  .detailBtn{
    position: absolute;
    top: 18px;
    left: 80px;
    font-size: 20px;
  }
  .amendBtn{
    position: absolute;
    top: 0.60625rem;
    right: 190px;
    width: 0.99625rem;
    height: 0.99625rem;
  }
  .amendBtnTitle{
    position: absolute;
    top: 15px;
    right: 130px;
    font-size: 24px;
  }
  .delectBtn{
    position: absolute;
    top: 0.60625rem;
    right: 80px;
    width: 28px;
    height: 28px;
  }
  .delectBtnTitle{
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 24px;
  }



  .addressContainer{
    text-align: center;
    margin-top: 6.6666666rem;
  }
  .addressContainer>img{
    width: 14.6rem;
    height: 11.6rem;
  }
  .addressWord{
    display: block;
    font-size: 0.8rem;
    text-align: center;
    color: #bdbdbd;

  }
  .primary-btn{
    text-decoration: none;
    color: #fff;
    display: inline-block;
    width: 470px;
    line-height: 68px;
    font-size: 26px;
    text-align: center;
    border-radius: 80px;
    background: #3c9dfc;
    position: absolute;
    bottom: 30px;
    left: 60px;
  }
</style>
